﻿@using Model.WXshopBuiness;
@using Model.Util.DTO;
@using Model.Util;
@using Xproject.Util;
@{
    Layout = "~/Views/Shared/_JSlayout.cshtml";
    string Domain = CommonHelper.GetAppSettings("Domin");
  
    List<ProductContents> contents = (List<ProductContents>)ViewData["contents"];
    int ContentIndex = contents.Count;
}
@model WXProduct
<style type="text/css">
    #uploader-demo .thumbnail {
        width: 110px;
        height: 110px;
    }

    .file-item {
        float: left;
        position: relative;
        margin: 0 20px 20px 0;
        padding: 4px;
    }

    .file-panel {
        position: absolute;
        height: 0;
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
        background: rgba( 0, 0, 0, 0.5 );
        width: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        z-index: 300;
    }
    .tuwenDiv {
        margin-bottom: 5px;
        border: 1px solid #F00;
    }
    .tuwenDivA {
        height: 500px;
        width: 100%;
        display: block;
    }
    .tuwenDivA_A {
        width: 100%;
        height: 10px;
        display: inline-block;
    }
    .tuwenDivA_B {
        width: 100%;
        height: 200px;
        display: inline-block;
    }
        .tuwenDivA_B input {
            width: 100%;
            height: 35px;
        }
        .tuwenDivA_B img {
            width: 100%;
            height: 160px;
        }
    .tuwenDivA_C {
        width: 100%;
        height: 220px;
        display: inline-block;
    }
    .tuwenDivA_C textarea{
        width: 100%;
        height: 200px;
    }


    .scroller_up_label {
        position: relative;
    }

    .scroller_up_fileinp {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    .scroller_up_btn {
        padding: 5px 10px;
        background: #00b0f0;
        color: #FFF;
        border: none;
        border-radius: 5px;
    }
    
</style>  
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<!-- 全局js --> 
<script type="text/javascript">
    $(document).ready(function () {
        var optionsNew = {
            beforeSubmit: function () {
                //layer.open({ type: 2, time: 2 });
                layer.load(1, { shade: [0.1, '#000'], time: 2000 });
            },
            success: function (data) {
                if (data.Success == true) {
                    layer.alert('编辑成功', { icon: 1, skin: 'layer-ext-moon', time: 2000 });
                } else {
                    layer.alert(data.Data, { icon: 1, skin: 'layer-ext-moon', time: 2 });
                }
            },
            error: function (data) {
                alert(JSON.stringify(data));
            },
            type: "post",
            clearForm: false,
            timeout: 100000
        };

        $("#formProduct").submit(function () {
            $("#formProduct").ajaxSubmit(optionsNew);// type="button"
            return false;
        });         
    });
    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
  
</script>
<script language="javascript">
    $(document).ready(function () {
        var total = $("#hiddenIndexTotal").val();
        @{
            for (int i = 1; i <= ContentIndex; i++)
            {
               <text>
              $("#productContentImg@(i)").bind("change", function() {
                var file = this.files[0];

                if (this.files && file)
                {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                    $("#img@(i)").attr("src", e.target.result);
                    $("#img@(i)").show();
                    }
                    reader.readAsDataURL(file);
                }
        });
        </text>
        }
    }
              $(".ScorllerImageUrl").bind("change", function () {                
                var file = this.files[0];
                var index = $(this).attr("userdata");
                if (this.files && file)
                {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $("#ScorllerImage"+index).attr("src", e.target.result);
                        $("#ScorllerImage"+index).show();
                    }
                    reader.readAsDataURL(file);
                }
        });

    });

    function appendNew() {
        var total = $("#hiddenIndexTotal").val();
        total++;
        $("#hiddenIndexTotal").val(total);
        var div = '<div class="col-sm-3 tuwenDiv" >'+
            '<div class="tuwenDivA">'+
                '<div class="tuwenDivA_A">'+
                    '<label>图文段 '+total+' </label>'+
                '</div>'+
            '<div class="tuwenDivA_B">' +
            '<input id="productContentImg' + total + '" name="productContentImg' + total + '" type="file" >' +
            '<img id="img' + total + '" src="" >'+
            '<input id="hiddenIndex' + total + '" value="" type="hidden" />'+
			'</div>'+
            '<div class="tuwenDivA_C">'+
            '<label>文字内容 ' + total + '</label>'+
                '<textarea id="productContent' + total + '" name="productContent' + total + '"></textarea>'+
            '</div>'+
	           '</div>'+
            '</div>';
        $("#productContentDiv").append(div);

        $("#productContentImg" + total).on("change", function () {
            var file = this.files[0];
            if (this.files && file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#img" + total).attr("src", e.target.result);
                    $("#img" + total).show();
                }
                reader.readAsDataURL(file);
            }
        });
    }
</script>

<div class="gray-bg">
    <div class="  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="formProduct" action="~/WXProduct/EditWXProduct" method="post">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">产品名：</label>
                                <div class="col-sm-8">
                                    <input id="ProductName" name="ProductName" class="form-control" type="text" placeholder=" 产品名不宜过长20字以内" required maxlength="20" value="@(Model!=null?Model.ProductName:"")">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">产品描述：</label>
                                <div class="col-sm-8">
                                    <input id="ShortDesc" name="ShortDesc" class="form-control" type="text" aria-required="true" aria-invalid="false" value="@(Model!=null?Model.ShortDesc:"")" required>
                                </div>
                            </div>
                            <div class="form-group">
                                @if (Model != null)
        {
                        <label class="col-sm-3 control-label">产品编码：</label>
                        <div class="col-sm-8">
                            <input id="ProductCode" readonly disabled="disabled" name="ProductCode" class="form-control" type="text" aria-required="true" aria-invalid="true" value="@(Model != null ? Model.ProductCode : "")" required>
                        </div>
}
else
{
                        <label class="col-sm-3 control-label">产品编码前缀：</label>
                        <div class="col-sm-8">
                            <input id="ProductCode" placeholder="输入个性化前缀，系统自动生成code" name="ProductCode" class="form-control" type="text" aria-required="true" aria-invalid="true" value="@(Model != null ? Model.ProductCode : "")" required>
                        </div>
}

                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">显示位置：</label>
                                <div class="col-sm-2">
                                    <select id="ShowOnWhere" name="ShowOnWhere" class="form-control">
                                        <option value="TUIJIAN" @(Model != null ? (Model.ShowOnWhere == "TUIJIAN" ? "selected" : "") : "")>首页推荐</option>
                                        <option value="" @(Model != null ? (Model.ShowOnWhere == "" ? "selected" : "") : "")>无</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label">显示风格：</label>
                                <div class="col-sm-2">
                                    <select id="ShowStyle" name="ShowStyle" class="form-control">
                                        <option value="1" @(Model != null ? (Model.ShowStyle == "1" ? "selected" : "") : "")>纯图样式（默认）</option>
                                        <option value="2" @(Model != null ? (Model.ShowStyle == "2" ? "selected" : "") : "")>图文样式</option>
                                        <option value="3" @(Model != null ? (Model.ShowStyle == "3" ? "selected" : "") : "")>样式三（暂未设计）</option>
                                        <option value="4" @(Model != null ? (Model.ShowStyle == "4" ? "selected" : "") : "")>样式四（暂未设计）</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label">排序：</label>
                                <div class="col-sm-2">
                                    <input id="SortID" name="SortID" class="form-control" type="number" value="@(Model!=null?Model.SortID:0)" required>
                                </div>
                            </div>                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">搜索关键字：</label>
                                <div class="col-sm-8">
                                    <input id="ProductKeyword" name="ProductKeyword" class="form-control" type="text" value="@(Model!=null?Model.ProductKeyword:"")">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <input id="Remark" name="Remark" class="form-control" type="text" value="@(Model!=null?Model.Remark:"")">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">市场价：</label>
                                <div class="col-sm-2">
                                    <input id="MarketPrice" required name="MarketPrice" class="form-control" type="number" step="0.01" value="@(Model!=null?Model.MarketPrice:0)">
                                </div>

                                <label class="col-sm-2 control-label">成本价：</label>
                                <div class="col-sm-2">
                                    <input id="CostPrice" required name="CostPrice" class="form-control" type="number" step="0.01" value="@(Model!=null?Model.CostPrice:0)">
                                </div>

                                <label class="col-sm-2 control-label">零售价：</label>
                                <div class="col-sm-2">
                                    <input id="SalePrice" required name="SalePrice" class="form-control" type="number" step="0.01" value="@(Model!=null?Model.SalePrice:0)">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">访问量：</label>
                                <div class="col-sm-2">
                                    <input id="VistiCounts" name="VistiCounts" class="form-control" type="number" value="@(Model!=null?Model.VistiCounts:0)">
                                </div>

                                <label class="col-sm-2 control-label">销售量：</label>
                                <div class="col-sm-2">
                                    <input id="SaleCounts" name="SaleCounts" class="form-control" type="number" value="@(Model!=null?Model.SaleCounts:0)">
                                </div>

                                <label class="col-sm-2 control-label">库存：</label>
                                <div class="col-sm-2">
                                    <input id="Stock" required name="Stock" class="form-control" type="number" value="@(Model!=null?Model.Stock:0)">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">分类：</label>
                                <div class="col-sm-2 ">

                                    @if (Model != null)
            {
                        <select class="form-control" id="CategoryID" name="CategoryID">
                            <option @if (0 == Model.CategoryID) { <text> selected="selected" </text> }
                                    value="0">
                                顶层分类
                            </option>
                            @foreach (Category info in ViewData["categoryList"] as List<Category>)
    {
                        <option @if (info.CategoryID == Model.CategoryID) { <text> selected="selected" </text> }
                                value="@info.CategoryID">
                            @Html.Raw(CommonHelper.GetHtmlBS(info.Layer - 1)) @info.Name
                        </option>
}
                        </select>
}
else
{
                        <select class="form-control" id="CategoryID" name="CategoryID">
                            <option value="0">
                                顶层分类
                            </option>
                            @foreach (Category info in ViewData["categoryList"] as List<Category>)
    {
                        <option value="@info.CategoryID">
                            @Html.Raw(CommonHelper.GetHtmlBS(info.Layer - 1)) @info.Name
                        </option>
}
                        </select>
}


                                </div>
                                <label class="col-sm-2 control-label">是否包邮：</label>
                                <div class="col-sm-2 ">
                                    <select id="IsFreeShipping" name="IsFreeShipping" class="form-control">
                                        <option value="0" @(Model != null ? (Model.IsFreeShipping == 0 ? "selected" : "") : "")>不包邮</option>
                                        <option value="1" @(Model != null ? (Model.IsFreeShipping == 1 ? "selected" : "") : "")>包邮</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label">状态：</label>
                                <div class="col-sm-2 ">
                                    <select id="State" class="form-control" name="State">
                                        <option value="0" @(Model != null ? (Model.State == 0 ? "selected" : "") : "")>上架</option>
                                        <option value="1" @(Model != null ? (Model.State == 1 ? "selected" : "") : "")>下架</option>
                                        <option value="2" @(Model != null ? (Model.State == 2 ? "selected" : "") : "")>产品过期</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">简略展示属性1：</label>
                                <div class="col-sm-2">
                                    <input id="Spec1" name="Spec1" class="form-control" type="text" value="@(Model!=null?Model.Spec1:"")">
                                </div>

                                <label class="col-sm-2 control-label">简略展示属性2：</label>
                                <div class="col-sm-2">
                                    <input id="Spec2" name="Spec2" class="form-control" type="text" value="@(Model!=null?Model.Spec2:"")">
                                </div>

                                <label class="col-sm-2 control-label">简略展示属性3：</label>
                                <div class="col-sm-2">
                                    <input id="Spec3" required name="Spec3" class="form-control" type="text" value="@(Model!=null?Model.Spec3:"")">
                                </div>
                            </div>

                            @if (ViewBag.productId != null && !string.IsNullOrEmpty(ViewBag.productId))
    {
                       
                            <div class="row" style="height:180px;">
                                <div class="form-inline" style="background-color:#27c24c;color:white;">
                                    已上传的产品轮播图片(默认第一张是主图)
                                </div>
                                <div class="col-lg-12" style="height:120px;">
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl1" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图1"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl1" name="ImageUrl1" userdata="1">
                                        </label>
                                        <img id="ScorllerImage1" src="@(Model.ImageUrl1!=""?Model.ImageUrl1:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl2" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图2"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl2" name="ImageUrl2" userdata="2">
                                        </label>
                                        <img id="ScorllerImage2" src="@(Model.ImageUrl2!=""?Model.ImageUrl2:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl3" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图3"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl3" name="ImageUrl3" userdata="3">
                                        </label>
                                        <img id="ScorllerImage3" src="@(Model.ImageUrl3!=""?Model.ImageUrl3:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl4" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图4"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl4" name="ImageUrl4" userdata="4">
                                        </label>
                                        <img id="ScorllerImage4" src="@(Model.ImageUrl4!=""?Model.ImageUrl4:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl5" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图5"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl5" name="ImageUrl5" userdata="5">
                                        </label>
                                        <img id="ScorllerImage5" src="@(Model.ImageUrl5!=""?Model.ImageUrl5:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl6" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图6"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl6" name="ImageUrl6" userdata="6">
                                        </label>
                                        <img id="ScorllerImage6" src="@(Model.ImageUrl6!=""?Model.ImageUrl6:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl7" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图7"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl7" name="ImageUrl7" userdata="7">
                                        </label>
                                        <img id="ScorllerImage7" src="@(Model.ImageUrl7!=""?Model.ImageUrl7:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl8" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图8"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl8" name="ImageUrl8" userdata="8">
                                        </label>
                                        <img id="ScorllerImage8" src="@(Model.ImageUrl8!=""?Model.ImageUrl8:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                    <div style="display:inline-block;float:left;width:105px;">
                                        <label class="scroller_up_label" for="ImageUrl9" style="display:block">
                                            <input type="button" class="scroller_up_btn" id="" value="轮播图9"><span id="text"></span>
                                            <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl9" name="ImageUrl9" userdata="9">
                                        </label>
                                        <img id="ScorllerImage9" src="@(Model.ImageUrl9!=""?Model.ImageUrl9:Model.Domain+"/Content/images/menuli_bg_hot.jpg")" style="width:100px;height:100px" class="ScorllerImage" />
                                    </div>
                                </div>

                            </div>
}
else
{
                        <div class="row" style="height:180px;">
                            <div class="form-inline" style="background-color:#27c24c;color:white;">
                                上传产品轮播图片(默认第一张是主图)
                            </div>
                            <div class="col-lg-12" style="height:120px;">
                                @for (int i = 1; i <= 9; i++)
        {
                        <div style="display:inline-block;float:left;width:105px;">
                            <label class="scroller_up_label" for="ImageUrl@(i)" style="display:block">
                                <input type="button" class="scroller_up_btn" id="" value="轮播图@(i)"><span id="text"></span>
                                <input type="file" class="scroller_up_fileinp ScorllerImageUrl" id="ImageUrl@(i)" name="ImageUrl@(i)" userdata="@(i)">
                            </label>
                            <img id="ScorllerImage@(i)" src="~/Content/images/menuli_bg_hot.jpg" style="width:100px;height:100px" class="ScorllerImage" />
                        </div>
}

                            </div>
                        </div>
}
                            <div class="form-inline" style="background-color:#27c24c;color:white;">
                                产品详细描述，图文方式，一个图片，配一段文字;纯图模式只需要上传图片即可
                            </div>
                            @if (contents != null && contents.Count > 0)
    {
                        <div class="row" id="productContentDiv">
                            @for (int i = 0; i < contents.Count; i++)
    {
                        <div class="col-sm-3" style="margin-bottom: 5px;">
                            <div style="height:500px;width:200px;display:block">
                                <div style="width:200px;height:10px;display:inline-block">
                                    <label>图文段 @contents[i].ProductIndex</label>
                                </div>
                                <div style="width:200px;height:400px;display:inline-block">
                                    <input id="productContentImg@(contents[i].ProductIndex)" name="productContentImg@(contents[i].ProductIndex)" type="file">
                                    <input id="hiddenIndex@(contents[i].ProductIndex)" value="" type="hidden" />
                                    <img src="@contents[i].ProductImage" style="width:200px;height:200px;" id="img@(contents[i].ProductIndex)" name="img@(contents[i].ProductIndex)" />
                                    <textarea id="productContent@(contents[i].ProductIndex)" name="productContent@(contents[i].ProductIndex)" style="width:200px;height:200px;">@contents[i].ProductContent</textarea>
                                </div>
                            </div>

                        </div>
}
                        </div>
}
else
{
                        <div class="row" id="productContentDiv">
                        </div>
}


                            <div class="form-inline" style="margin-top:5px;">
                                <div class="col-lg-10">
                                    <a class="btn btn-success" onclick="appendNew(); return;">添加图文段</a>
                                    <input id="hiddenIndexTotal" value="@ContentIndex" type="hidden" />
                                </div>
                            </div>
                            <div class="form-inline">
                                <div class="col-lg-10">
                                    <a class=" btn btn-success" href="#" onclick="AddVideo(); return;">添加视频</a><label>视屏会在产品详情顶部轮播显示，仅支持.mp4 .ogg .webm</label>
                                    <input id="productVideo" name="productVideo" type="file" accept="video/mp4,video/ogg,video/webm">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-8 col-sm-offset-3">
                                    <input type="hidden" name="ProductID" value="@(Model!=null?Model.ProductID:"")" />
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

